import React, { Component } from 'react'
import { Card, Spin, Icon, Alert } from 'antd'
import './style.less'

class Loadings extends Component {
    render() {
        const antIcon = <Icon type="loading" style={{ fontSize: 24 }}></Icon>
        return (
            <div className="loading-wrap">
                <Card title="Spin用法" className="card-item">
                    <Spin size="small" />
                    <Spin />
                    <Spin size="large" />
                    <Spin indicator={antIcon} />
                </Card>
                <Card title="内容遮罩" className="card-item">
                    <Alert message="React" description="欢迎使用AntD UI框架" type="info" />
                    <div className="example">
                        <Spin />
                    </div>
                    <Spin>
                        <Alert message="React" description="欢迎使用AntD UI框架" type="warning" />
                    </Spin>
                    <Spin tip="加载中...">
                        <Alert message="React" description="欢迎使用AntD UI框架" type="warning" />
                    </Spin>
                    <Spin tip="加载中..." indicator={antIcon}>
                        <Alert message="React" description="欢迎使用AntD UI框架" type="warning" />
                    </Spin>
                </Card>
            </div>
        )
    }
}

export default Loadings